<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>活动统计</title>
    <link rel="stylesheet" href="http://cdn.zallsteel.com/mgt/v2/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://itphy.com/cdn/layui/css/layui.css">
    <link rel="stylesheet" href="http://cdn.zallsteel.com/mgt/v2/js/summernote/summernote.css">
    <style>
        .tabbable {
            margin-bottom: 10px;
        }

        th {
            text-align: center;
            background-color: #0baae4;
            color: white;
        }

        h3 {
            font-weight: 800 !important;
        }
        num{
            color: #0baae4;
        }
    </style>
</head>
<body style="width: 1827px; overflow-x: hidden;">
<div class="loading-container loading-inactive">
    <div class="loading-progress">
        <div class="rotator">
            <div class="rotator">
                <div class="rotator colored">
                    <div class="rotator">
                        <div class="rotator colored">
                            <div class="rotator colored"></div>
                            <div class="rotator"></div>
                        </div>
                        <div class="rotator colored"></div>
                    </div>
                    <div class="rotator"></div>
                </div>
                <div class="rotator"></div>
            </div>
            <div class="rotator"></div>
        </div>
        <div class="rotator"></div>
    </div>
</div><!-- Main Container -->
<div class="main-container container-fluid">
    <!-- Page Container -->
    <div class="page-container">
        <!-- Page Sidebar -->
        <!-- /Page Sidebar -->
        <!-- Page Content -->
        <div class="">
            <!-- Page Header -->
            <div class="page-header position-relative">
                <div class="header-title">
                    <h1 data-rel="article_list">活动统计</h1>
                </div>
                <!--Header Buttons-->
                <!--Header Buttons End-->
            </div>
            <!-- /Page Header -->

            <!-- Page Body -->
            <div class="page-body ">
                <div class="dashboard-box">
                    <div class="box-tabbs ">
                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">会员认证</li>
                                <li>榜单企业</li>
                                <li>数据统计</li>
                                <li>弹幕列表</li>
                            </ul>
                            <div class="layui-tab-content" style="height: 100px;">
                                <div class="layui-tab-item layui-show">

                                    <div class="row" style="margin-top: 20px">
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <label class="col-sm-2 control-label">公司名称</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <label class="col-sm-2 control-label">公司名称</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <label class="col-sm-2 control-label">公司名称</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <label class="col-sm-2 control-label">公司名称</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <label class="col-sm-2 control-label">公司名称</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <label class="col-sm-2 control-label">公司名称</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <div class="col-sm-offset-2 col-sm-5">
                                                    <button class="btn btn-primary">搜索</button>
                                                    <button class="btn btn-default">重置</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row" style="margin-top: 20px">
                                        <div class="form-horizontal">
                                            <div class="col-sm-2">
                                                <button class="btn" style="background-color: #0baae4;color: white">导出列表</button>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <table id="membershipCertification-table">

                                            </table>
                                        </div>
                                    </div>

                                </div>
                                <div class="layui-tab-item">

                                    <div class="row" style="margin-top: 20px">
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <label class="col-sm-2 control-label">公司名称</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <label class="col-sm-2 control-label">公司名称</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <label class="col-sm-2 control-label">公司名称</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 margin-bottom-10">
                                            <div class="form-horizontal">
                                                <div class="col-sm-offset-2 col-sm-5">
                                                    <button class="btn btn-primary">搜索</button>
                                                    <button class="btn btn-default">重置</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row" style="margin-top: 20px">
                                        <div class="form-horizontal">
                                            <div class="col-sm-2">
                                                <button class="btn" style="background-color: #0baae4;color: white;">导出列表</button>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <table id="listedCompanies-table">

                                            </table>
                                        </div>
                                    </div>

                                </div>
                                <div class="layui-tab-item">


                                    <div class="tab-content tabs-flat" style="display:block;">
                                        <div class="row">
                                            <div class="col-sm-12 margin-top-20">
                                                <div class="col-sm-2 margin-bottom-10">
                                                    <button class="btn" style="background-color: #0baae4;color: white;">导出列表</button>
                                                </div>
                                                <div class="col-sm-12">
                                                    <div class="table-responsive">
                                                        <table class="table table-bordered table-striped"
                                                               style="margin: auto;margin-bottom: 10px;text-align: center">
                                                            <thead>
                                                            <tr>
                                                                <th>活动总访问次数</th>
                                                                <th>参与活动人数</th>
                                                                <th>活动转发次数</th>
                                                                <th>活动点赞次数</th>
                                                                <th>活动首页访问次数</th>
                                                                <th>我要参与页面访问次数</th>
                                                                <th>榜单页面访问次数</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td>
                                                                    <div class="col-sm-12">
                                                                        1111
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="col-sm-12">
                                                                        1111
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="col-sm-12">
                                                                        1111
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="col-sm-12">
                                                                        1111
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="col-sm-12">
                                                                        1111
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="col-sm-12">
                                                                        1111
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="col-sm-12">
                                                                        1111
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="layui-tab-item">

                                    <div class="row">
                                        <div class="col-sm-12 margin-top-20">
                                            <div class="col-sm-2 margin-bottom-10">
                                                <button class="btn" style="background-color: #0baae4;color: white;">导出列表</button>
                                            </div>
                                            <div class="col-sm-12">
                                                <span>总计弹幕数：<num>999</num>，修改弹幕数：<num>999</num>，删除弹幕数：<num>999</num></span>
                                                <table id="barrageList-table"></table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Page Body -->
        </div>
        <!-- /Page Content -->
    </div>
    <!-- /Page Container -->
</div>
<!---->

<!-- 二维码容器 -->
<div id="qrcode" style="width: 100px;margin:15px auto">

</div>

<script src="http://itphy.com/cdn/jquery/jquery.min.js"></script>
<script src="http://itphy.com/cdn/qrcode/qrcode.min.js"></script>
<!--Bootstrap Date Range Picker-->
<script src="http://cdn.zallsteel.com/mgt/v2/js/datetime/moment.js"></script>
<script src="http://cdn.zallsteel.com/mgt/v2/js/datetime/daterangepicker.js"></script>
<script src="http://cdn.zallsteel.com/mgt/v2/js/select2/select2.js"></script>
<script src="http://cdn.zallsteel.com/mgt/v2/js/jquery.cookie.js"></script>
<script src="http://cdn.zallsteel.com/mgt/v2/js/pagination.js"></script>
<script src="http://cdn.zallsteel.com/mgt/v2/js/msgUtil.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="http://cdn.zallsteel.com/mgt/v2/js/bootstrap.min.js"></script>
<script src="http://cdn.zallsteel.com/mgt/v2/js/summernote/summernote.min.js"></script>
<script src="http://cdn.zallsteel.com/mgt/v2/js/summernote/lang/summernote-zh-CN.min.js"></script>
<script src="http://itphy.com/cdn/layui/layui.js"></script>
<script src="http://itphy.com/cdn/common/common.js"></script>
<script>
    let queue = getAsyncFunQueue(24);
    //加载模块
    layui.use(function () {
        var layer = layui.layer
            , laypage = layui.laypage
            , laydate = layui.laydate
            , table = layui.table;
        let t1 = table.render({
            elem: '#membershipCertification-table'
            , url: '/app' //数据接口
            , title: '用户表'
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                groups: 9
            },
            request: {
                pageName: "pageNum",
                limitName: "pageSize",
            },
            method: "POST"
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: "20%", fixed: 'left', totalRowText: '合计：'}
                , {field: 'username', title: '用户名', width: "20%"}
                , {field: 'experience', title: '积分', width: "20%", totalRow: true}
                , {field: 'sex', title: '性别', width: "20%"}
                , {field: 'score', title: '评分', width: "20%", totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 分'}
            ]]
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": 1, //解析数据长度
                    "data": [
                        {
                            checkbox: "解析接口状态",
                            id: "1",
                            username: "解析接口状态",
                            experience: "解析接口状态",
                            sex: "解析接口状态",
                            score: "解析接口状态",
                            city: "解析接口状态",
                        }
                    ] //解析数据列表
                };
            }
        });
        let w = $("#membershipCertification-table").closest("div").width();
        let t2 = table.render({
            elem: '#listedCompanies-table'
            , url: '/app' //数据接口
            , title: '用户表'
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                groups: 9
            },
            request: {
                pageName: "pageNum",
                limitName: "pageSize",
            },
            method: "POST"
            , cols: [[ //表头
                {field: 'id', title: 'ID', fixed: 'left'}
                , {field: 'username', title: '用户名'}
                , {field: 'experience', title: '积分'}
                , {field: 'sex', title: '性别'}
                , {field: 'score', title: '评分'}
            ]]
            , cellMinWidth: w / 5
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": 1, //解析数据长度
                    "data": [
                        {
                            checkbox: "解析接口状态",
                            id: "1",
                            username: "解析接口状态",
                            experience: "解析接口状态",
                            sex: "解析接口状态",
                            score: "解析接口状态",
                            city: "解析接口状态",
                        }
                    ] //解析数据列表
                };
            }
        });
        let t3 = table.render({
            elem: '#barrageList-table'
            , url: '/app' //数据接口
            , title: '用户表'
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                groups: 9
            },
            cellMinWidth: w / 5,
            request: {
                pageName: "pageNum",
                limitName: "pageSize",
            },
            method: "POST"
            , cols: [[ //表头
                {field: 'id', title: 'ID', fixed: 'left', totalRowText: '合计：'}
                , {field: 'username', title: '用户名'}
                , {field: 'experience', title: '积分', totalRow: true}
                , {field: 'sex', title: '性别'}
                , {field: 'score', title: '评分', totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 分'}
            ]]
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": 1, //解析数据长度
                    "data": [
                        {
                            checkbox: "解析接口状态",
                            id: "1",
                            username: "解析接口状态",
                            experience: "解析接口状态",
                            sex: "解析接口状态",
                            score: "解析接口状态",
                            city: "解析接口状态",
                        }
                    ] //解析数据列表
                };
            }
        });
    })
    var qrcode = new QRCode("qrcode", {
        text: "http://www.baidu.com",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
</script>
</body>
</html>